<template>
  
          <li>
               <img :src="item.pic" alt="" @click="detail(item.id)">
               <h4>{{item.title}}</h4>
               <p @click="del(i)">删除</p>
            </li>
    
</template>

<script>
export default {
   props:["item","i"],
    data() {
        return {};
    },
    mounted() {},
    methods: {
         detail(id){
            this.$router.push({path:"/Detail",query:{id:id}})
        },
        del(i){
            this.$emit("del",i)
        }
    },
    components:{}
};
</script>

<style lang='scss'>
li{
         width: 45%;
         border: 1px solid #ccc;
         margin-top: 30px;
         h4{
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
           margin: 10px 5px;
         }
         p{
             margin: 10px 5px;
             height: 40px;
             line-height: 40px;
             color: white;
             background-color: red;
         }
         img{
             width: 100%;
         }
     }
</style>
